import {
  Row,
  Col,
  Transfer,
  Flex,
  Typography,
  Form,
  Input,
  Button,
  message
} from 'antd'
import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { userGroupAdd, userGroupInfo, userTagList } from '../service/user'

export default function UserAddCrowd() {
  const navigate = useNavigate()
  const { id } = useParams() // 获取路由参数中的id
  const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
  const [form] = Form.useForm()
  const [title, setTitle] = useState(isEditing ? '编辑人群' : '新建人群')

  // 穿梭机数据
  const [mockData, setMockData] = useState([])
  const [targetKeys, setTargetKeys] = useState(
    mockData.filter((item) => item.chosen).map((item) => item.key)
  )
  useEffect(() => {
    ;(async () => {
      const res = await userTagList()
      console.log(res)
      const arr = []
      for (let key in res.data) {
        res.data[key].forEach((item) => {
          arr.push({
            key: item.tagLibraryBO.id,
            title: item.tagLibraryBO.tagName,
            chosen: false
          })
        })
      }
      setMockData(arr)
    })()
    // 判断编辑还是添加
    if (isEditing) {
      // 通过id查询详情
      ;(async () => {
        const res = await userGroupInfo(id)
        console.log(res)
        // 将查询的数据赋给表单
        form.setFieldsValue(res.data)
        // 设置穿梭框的默认选中
        const arr = res.data.tagIds.split(',').map((item) => {
          return Number(item)
        })
        setTargetKeys(arr)
      })()
    } else {
    }
  }, [])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>{title}</Typography.Title>
          </Flex>
        </Col>
      </Row>
      <Form
        labelCol={{
          span: 2
        }}
        wrapperCol={{
          span: 12
        }}
        style={{ width: '100%', marginTop: 30 }}
        onFinish={(values) => {
          values.tagIds = ''
          // 获取id，并用逗号分开
          targetKeys.forEach((item) => {
            values.tagIds += item + ','
          })
          values.tagIds = values.tagIds.substring(0, values.tagIds.length - 1)
          // 判断是编辑还是添加
          if (isEditing) {
            ;(async () => {})()
          } else {
            // 新增
            ;(async () => {
              const res = await userGroupAdd(values)
              console.log(res)
              if (res.code === '0') {
                message.success('新增成功')
                setTimeout(() => {
                  navigate('/admin/user/crowd')
                }, 1000)
              }
            })()
          }
        }}
        form={form}
      >
        <Row className="container" style={{ marginBottom: 0 }}>
          <Col span={24}>
            <Typography.Title level={4}>基本信息</Typography.Title>
          </Col>
          <Col span={24}>
            <Form.Item
              label="人群名称"
              name="groupName"
              rules={[{ required: true, message: '请输入人群名称' }]}
            >
              <Input
                maxLength={30}
                showCount
                placeholder="请输入人群名称 "
                style={{ width: 500 }}
              />
            </Form.Item>
            <Form.Item label="人群介绍">
              <Input.TextArea
                maxLength={100}
                showCount
                style={{ width: 500, height: 100 }}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row className="container" style={{ marginTop: 0, marginBottom: 0 }}>
          <Col span={24}>
            <Typography.Title level={4}>人群特征</Typography.Title>
          </Col>
          <Col span={24}>
            <Row>
              <Col span={13} offset={1} style={{ display: 'flex' }}>
                <Transfer
                  dataSource={mockData}
                  showSearch
                  titles={['标签', '标签']}
                  targetKeys={targetKeys}
                  onChange={(newValue) => {
                    console.log(newValue)
                    setTargetKeys(newValue)
                  }}
                  render={(item) => item.title}
                />
              </Col>
            </Row>
          </Col>
        </Row>
        <Row className="container" style={{ marginTop: 0, marginBottom: 0 }}>
          <Col span={24}>
            <Form.Item label="预估人数" name="userNumber">
              <Input style={{ width: 200, marginRight: 10 }} />
            </Form.Item>
          </Col>
        </Row>
        <Row className="container" style={{ marginTop: 0, paddingBottom: 100 }}>
          <Col span={4} offset={1}>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
            {/* 重置按钮 */}
            <Button style={{ marginLeft: 10 }} htmlType="reset">
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    </>
  )
}
